﻿@using CleanArchitecture.Infrastructure.Models.Business.Columns;
@using System.Web; 
@inject CleanArchitecture.Infrastructure.Interfaces.IWorkContext workContext
@{
    Layout = "~/Views/Shared/_FrontendLayout.cshtml";
    IList<ColumnItemModel> AllColumns = ViewBag.AllColumns as List<ColumnItemModel> ?? null;
    var SearchKey = ViewBag.SearchKeyword as string ?? "";
}
@section cssstyles{
    <style type="text/css">
        [v-cloak] { display: none; }
        .padding16 { padding: 0 16px; }
    </style>
}
@section csslinks {
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/ant-design-vue@1.6.0/dist/antd.min.css" />
}
<!--内页banner-->
<section class="zbannerbox">
    <p class="img"><img src="/frontend/images/photos/banner06.jpg" /></p>
    <div class="titbox">
        <div class="main">
            <p class="tit wow flipInX">站内搜索</p>
            <p class="entit wow flipInX" data-wow-delay="0.4s">SEARCH</p>
        </div>
    </div>
</section>

<div id="article-list" v-cloak>
    <p class="h40"></p>
    <a-locale-provider :locale="locale">
        <a-spin :spinning="loading">
            <div class="main" v-if="totalcount > 0">
                <p class="fs16 wow fadeInUp">
                    共搜索到关于 <span class="fc">“{{decodeURIComponent(keyword)}}”</span>的  <span class="fc">{{totalcount}}</span> 条结果~ 
                    <span class="ta-r">搜索耗时：{{elapsed}}ms</span>
                </p>
                <p class="h30"></p>

                <a class="txtlist01 wow fadeInUp" v-for="(item, index) in listData" :key="item.Entity.Id" 
                   :href="'/article/detail?columnhash='+item.Entity.MetaDescription + '&itemhash=' + item.Entity.MetaTitle">
                    <p class="tit">{{item.Entity.Title}}</p>
                    <p class="date">{{item.Entity.CreatedOnTimeUtc | formatDate('yyyy-MM-dd')}}</p>
                </a>
                <p class="h60"></p>
                <!--分页-->
                <div class="ta-c wow fadeInUp" v-if="totalcount > 0">
                    <a-pagination :default-current="1"
                                  :total="totalcount"
                                  :item-render="pageItemRender"
                                  @@change="onPageChange">
                    </a-pagination>
                </div>
                <p class="h80"></p>
            </div>
            <div class="wow fadeInUp animated" v-else>
                <a-empty :image="emptyImage" />
            </div>
        </a-spin>
    </a-locale-provider>
    <p class="h80"></p>
</div>

@section scripts{
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@1.6.0/dist/antd.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@1.6.0/dist/antd-with-locales.min.js"></script>
    <script type="text/javascript">
    $(function () {
        var languageCode = "@(workContext.WorkingLanguage.LanguageCode)";
        function padLeftZero(str) {
            return ('00' + str).substr(str.length);
        }
        layui.use(['layer'], function () {
            var layer = layui.layer;
            var vm = new Vue({
                el: "#article-list",
                data: {
                    loading: true,
                    locale: antd.locales.zh_CN,
                    emptyImage: antd.Empty.PRESENTED_IMAGE_SIMPLE,
                    keyword: "",
                    page: 1,       //分页 当前页数
                    pagesize: 20,  //分页 每页显示列数
                    totalcount: 0, //后台返回分页列表记录总数
                    elapsed: 0,   //检索耗时
                    listData: [],
                },
                filters: {
                    //过滤图片链接中的Id
                    excludeImageId(value) {
                        const isImgurlwithId = /^\d+;*/
                        if (isImgurlwithId.test(value)) {
                            const imguri = value.toString().split(";", 2).slice(1);
                            return imguri;
                        }
                        return '';
                    },
                    formatDate: function (date, fmt){
                        if (date === undefined) return '';
                        if (typeof date === 'string') date = new Date(date);
                        if (/(y+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                        }
                        let o = {
                            'M+': date.getMonth() + 1,
                            'd+': date.getDate(),
                            'h+': date.getHours(),
                            'm+': date.getMinutes(),
                            's+': date.getSeconds()
                        };
                        for (let k in o) {
                            if (new RegExp(`(${k})`).test(fmt)) {
                                let str = o[k] + '';
                                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
                            }
                        }
                        return fmt;
                    },
                },
                beforeMount: function () {
                    switch (languageCode) {
                        case "en":
                            this.locale = antd.locales.en_US;
                            break;
                        case "zh":
                        default:
                            this.locale = antd.locales.zh_CN;
                            break;
                    }
                    this.keyword = "@Html.Raw(HttpUtility.JavaScriptStringEncode(SearchKey))";
                    this.keyword = encodeURIComponent(this.keyword);
                    //console.log(this.keyword);
                    this.remoteLoadListData();
                },
                methods: {
                    remoteLoadListData: function () {
                        this.loading = true;
                        var me = this;
                        var requestUri = '/api/frontend/searchengine/searchservice?s=' + me.keyword + "&page=" + me.page;
                        httpapi.fetchGet(requestUri).then(res => {
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                layer.msg(res.message);
                            else {//Success
                                me.loading = false;
                                me.totalcount = res.data.TotalHits;
                                me.elapsed = res.data.Elapsed;
                                me.listData = res.data.Results;
                            }
                        }).catch(error => {
                            layer.msg('对不起，出现未知错误，请您联系系统管理员！');
                            console.log(error);
                        });
                    },
                    pageItemRender(current, type, originalElement) {
                        //http://www.itxst.com/ant-design-vue/e2yymebi.html
                        var prevText = "";
                        var nextText = "";
                        switch (languageCode) {
                            case "en":
                                prevText = "Previous";
                                nextText = "Next";
                                break;
                            case "zh":
                            default:
                                prevText = "上一页";
                                nextText = "下一页";
                                break;
                        }
                        if (type === 'prev') {
                            originalElement.children = undefined;
                            originalElement.text = prevText;
                            originalElement.data.class = originalElement.data.class + " padding16"
                            return originalElement;
                        } else if (type === 'next') {
                            originalElement.children = undefined;
                            originalElement.text = nextText;
                            originalElement.data.class = originalElement.data.class + " padding16"
                            return originalElement;
                        }
                        return originalElement;
                    },
                    onPageChange: function (pageNumber) {
                        this.page = pageNumber;
                        this.remoteLoadListData();
                    },
                },
            });
        });
    });
    </script>
}


